<template>
  <el-select
    ref="select"
    v-model="modelValue"
    :disabled="disabled"
    value-key="oldFacilitiyNo"
    filterable
    clearable
    remote
    placeholder="请输入名称搜索"
    :remote-method="remoteMethod"
    :loading="loading"
    @focus="focus()"
    @change="getInfo"
  >
    <el-option
      v-for="item in list"
      :key="item.oldFacilitiyNo"
      :label="item.oldFacilitiyName"
      :value="item.oldFacilitiyNo"
    >
      <template>
        <div class="itemBox">
          <span>{{ item.oldFacilitiyName }} </span>
          <!-- <span>{{ item.identityCard }}</span> -->
        </div>
      </template>
    </el-option>
  </el-select>
</template>

<script>
/*
--选择养老设施使用示例--
--{ type: '7' }代表食堂

<selectOldFacility v-model="model.facilityNo" :newdata="newdata" />
<selectOldFacility v-model="model.facilityNo" :param="{ type: '7' }" />

import selectOldFacility from '@/components/xm/selectOldFacility'

--新增额外数据源--
newdata: {},

this.newdata = {
  oldFacilitiyName: res.data.oldFacilitiyName,
  oldFacilitiyNo: res.data.oldFacilitiyNo
}
*/

import { postAction } from '@/api/manage'
export default {
  components: {},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    param: {
      type: Object,
      default: () => {}
    },
    newdata: { // 新增额外数据源
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      allList: []
    }
  },
  computed: {
    modelValue: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('change', newValue)
      }
    }
  },
  watch: {
    newdata(newVal) {
      console.log('监听新增数据源newdata', newVal)
      if (newVal) {
        // 检查选项列表中是否已有相同的 no, 不存在再push进去
        const existObj = this.list.find(option => option.oldFacilitiyNo === newVal.oldFacilitiyNo)
        if (!existObj) {
          this.list.push({
            oldFacilitiyNo: newVal.oldFacilitiyNo,
            oldFacilitiyName: newVal.oldFacilitiyName
          })
        }
      }
    }
  },
  mounted() {
    this.getList('', 1)
  },
  methods: {
    // 点击时恢复初始数据源
    focus() {
      this.list = this.allList
    },
    // 获取列表
    getList(name, isInit) {
      this.loading = true
      const url = '/old/oldFacility/listPage'
      postAction(url, { pageNum: 1, pageSize: 50, oldFacilitiyName: name, ...this.param }).then(res => {
        if (res.status === 0) {
          this.list = res.data.list || []
          if (isInit) {
            this.allList = res.data.list || []
          }
          this.loading = false
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 远程搜索
    remoteMethod(name) {
      this.getList(name)
    },
    // 获取信息
    getInfo(no) {
      const rowInfo = this.list.find(res => no === res.oldFacilitiyNo)
      if (rowInfo) {
        this.$emit('getRowInfo', rowInfo)
      }
    }
  }
}

</script>
<style scoped lang='scss'>
.el-select{
  width:100%;
}
.itemBox{
  display:flex;
  justify-content:space-between;
}
</style>
